<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格和表单</title>
    <style rel="stylesheet">
        *{
            /*统一字体设置*/
            font-size: 30px;
            font-weight: bolder;
            font-style: italic;
            /*text-decoration: underline overline line-through;*/
        }
        .one{
            background-color: lightgray;
        }
        table{
            border-style: solid;
            border-color: red;
            border-width: 2px;
            color: white;
            width: 50%;
            height: 50%;
            text-align: center;
            margin: auto;

        }
        .two{
            background-color: gray;
        }
        #div1{
            width: 50%;
            height: 600px;
            background-color: red;
            opacity: 0.5;
            background-image: url("../images/1.jpg");
        }
        #div2{
            width: 50%;
            height: 600px;
            background-color: green;
            background-image: url("../images/1.jpg");
        }

        div > div{
            float: left;
        }
        body{
            background-repeat: no-repeat;
            background-position: 0 0;
        }
    </style>
</head>
<body>
    <div>
        <div id="div1">
            <table>
                <tr class="one">
                    <td>学号</td>
                    <td>姓名</td>
                    <td>年龄</td>
                </tr>
                <tr class="two">>
                    <td>1002</td>
                    <td>李四</td>
                    <td>25</td>
                </tr>
                <tr class="one">>
                    <td>1003</td>
                    <td>王五</td>
                    <td>25</td>
                </tr>
                <tr class="two">>
                    <td>1001</td>
                    <td>张三</td>
                    <td>20</td>
                </tr>

            </table>
        </div>
        <div id="div2">
            请输入下列信息:</h2>
            <form action="http://www.baidu.com" method="get">
            账号:<input type="text" name="username"><br>
            密码:<input type="password" name="password"><br>
            性别:<input type="radio" name="gender">男
                <input type="radio" name="gender">女<br>
            爱好:<input type="checkbox">听歌
                <input type="checkbox">打游戏
                <input type="checkbox">运动<br>
            地区:
                <select name="region">
                    <option value="0">请选择。。。</option>
                    <option value="1">呼和浩特</option>
                    <option value="2">包头</option>
                    <option value="3">鄂尔多斯</option>
                    <option value="4">赤峰</option>
                    <option value="5">通辽</option>
                    <option value="6">呼伦贝尔</option>
                    <option value="7">锡林郭勒</option>
                </select><br>
            请输入您的自我描述(200字左右):<br>
            <textarea cols="30" rows="3"></textarea>
                <br>
                <input type="submit" value="提交">
                <input type="reset" value="重置">
                <button type="button">自定义的按钮</button>
            </form>
        </div>
    </div>
</body>
</html>